<template>
  <div>
    <ul class="comment-list">
      <li v-for="(item,k) in commentList" :key="k" class="comment-list-item">
        <el-avatar class="pointer" :size="40" :src="item.avatarImg" @error="errorHandler">
          <img src="../../../assets/image/avatar.png"/>
        </el-avatar>
        <div class="comment-item-box">
          <p class="nick-name">{{item.nickName}}<span v-if="item.isAuthor==1" class="author">作者</span></p>
          <div class="content">{{item.content}}</div>
          <div class="time-reply">
            <span>{{item.createTime}}</span>
            <div>
              <span class="pointer look-reply" @click="lookReply(k+'')" v-if="item.sub.length>0">查看回复({{item.sub.length}})</span>
              <span class="pointer" @click="clickReply(k+'')"><i class="el-icon-chat-round"></i>回复</span>
            </div>
          </div>
          <div class="reply-wrap" v-if="showReply&&showIndex==(k+'')">
            <comment-textarea
                    placeholder="说点什么"
                    :showAvatar="false"
                    :blogId="blogId"
                    :targetId="item.id"
                    :byAiteId="item.userId"
                    :byAiteName="item.nickName"
                    :byAiteIsAuthor="item.isAuthor"
                    @updateComments="updateComments">
            </comment-textarea>
          </div>
          <ul class="reply-wrap comment-list" v-if="item.sub.length>0&&showReplyList&&replyListIndex==(k+'')">
            <li v-for="(item1,k1) in item.sub" :key="k1" class="comment-list-item">
              <el-avatar class="pointer" :size="40" :src="item1.avatarImg" @error="errorHandler">
                <img src="../../../assets/image/avatar.png"/>
              </el-avatar>
              <div class="comment-item-box">
                <p class="nick-name">{{item1.nickName}}<span v-if="item1.isAuthor==1" class="author">作者</span></p>
                <div class="content">
                  <span class="reply-text">回复</span>
                  <span class="by-aite-name">{{item1.byAiteName}}<span v-if="item1.byAiteIsAuthor==1" class="author">作者</span></span>：{{item1.content}}
                </div>
                <div class="time-reply">
                  <span>{{item1.createTime}}</span>
                  <span class="pointer" @click="clickReply(k+'-'+k1)"><i class="el-icon-chat-round"></i>回复</span>
                </div>
                <div class="reply-wrap reply-wrap-sub" v-if="showReply&&showIndex==(k+'-'+k1)">
                  <comment-textarea
                          placeholder="说点什么"
                          :showAvatar="false"
                          :blogId="blogId"
                          :targetId="item.id"
                          :byAiteId="item1.userId"
                          :byAiteName="item1.nickName"
                          :byAiteIsAuthor="item1.isAuthor"
                          @updateComments="updateComments">
                  </comment-textarea>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import commentTextarea from "./commentTextarea";

  export default {
    name: "commentList",
    components: {commentTextarea},
    props: {
      blogId: {
        type: Number,
        default: null
      },
      commentList: {
        type: Array,
      },
    },
    data() {
      return {
        showReplyList: false,
        replyListIndex: "",
        showReply: false,
        showIndex: "",
      }
    },
    methods: {
      errorHandler() {
        return true
      },
      updateComments() {
        this.showReply = false;
        this.$parent.queryComments();
      },
      lookReply(k) {
        if (this.replyListIndex != k) {
          this.showReplyList = true;
        } else {
          this.showReplyList = !this.showReplyList;
        }
        this.replyListIndex = k;
      },
      clickReply(k) {
        if (this.showIndex != k) {
          this.showReply = true;
        } else {
          this.showReply = !this.showReply;
        }
        this.showIndex = k;

      }
    }
  }
</script>

<style lang="less" scoped>
  .comment-list {
    padding: 10px 40px;

    .comment-list-item {
      display: flex;
      padding-top: 12px;

      .comment-item-box {
        flex: 1;
        margin-left: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid #eee;

        .nick-name {
          color: @color-blue;
        }

        .content {
          line-height: 1.5;
          margin: 10px 0;
        }

        .time-reply {
          font-size: 12px;
          color: #8a9aa9;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .el-icon-chat-round {
            margin-right: 5px;
            font-size: 14px;
          }

          .look-reply {
            margin-right: 20px;
          }
        }

        .reply-wrap {
          background-color: #f6f8fa;
          padding: 10px 10px 0 10px;
          margin-top: 12px;

          &.reply-wrap-sub {
            background-color: #FFFFFF;
            border: 1px solid #eee;
          }
        }

        .reply-text {
          color: #8a9aa9;
        }

        .by-aite-name {
          color: @color-blue;
          margin-left: 5px;
          margin-right: 5px;
        }
      }

      &:last-child {
        .comment-item-box {
          border-bottom: none;
        }
      }
    }

    .author {
      padding: 1px 3px;
      background-color: #409EFF;
      border-radius: 2px;
      font-size: 12px;
      color: #FFFFFF;
      margin-left: 8px;
    }
  }

  @media screen and (max-width: 767px) {
    .comment-list {
      padding: 10px 0;
    }
  }
</style>
